<template>
  <div class="col q-ma-xs column">
    <q-card class="col column q-pa-xs no-wrap">
      <div class="text-subtitle1 text-center q-py-sm">图形库设置</div>
      <q-separator class="q-mb-sm" />
      <q-select
        dense
        outlined
        options-dense
        v-model="config.id"
        prefix="选择图形："
        class="q-my-sm"
        :options="selectOptions"
        emit-value
        map-options
        ref="selectInput"
        @click.native="popupSelect"
      >
      </q-select>
    </q-card>
    <q-dialog maximized flat persistent ref="dialog">
      <q-form class="dialog_tool column">
        <h5 class="view_title justify-between q-px-md">
          选择图形
          <q-btn dense outline round icon="clear" size="sm" v-close-popup />
        </h5>
        <div class="col column q-pa-sm">
          <q-input
            clearable
            outlined
            dense
            placeholder="请输入关键字搜索"
            class="on-left"
            @input="changeType"
            debounce="500"
            v-model="key"
            style="width:200px;"
          >
            <template #append>
              <q-btn
                flat
                round
                icon="search"
                color="primary"
                @click="changeType"
                :loading="loading"
              >
                <q-tooltip>搜索</q-tooltip>
              </q-btn>
            </template>
          </q-input>
          <q-tabs
            v-model="type"
            inline-label
            outside-arrows
            class="q-mt-sm text-primary outside-arrows"
            @input="changeType()"
          >
            <q-tab v-for="type in typeList" :key="type.id" :name="type.id" :label="type.name" />
          </q-tabs>
          <q-scroll-area class="col">
            <div class="row">
              <div class="q-pt-md q-gutter-sm row col">
                <q-img
                  v-for="data in list"
                  :key="data.id"
                  :transition="getTransition()"
                  :src="imagePath(data.id)"
                  style="width: 200px;height:150px;"
                  ratio="4/3"
                  spinner-color="white"
                  class="rounded-borders shadow-4 col-2 cursor-pointer"
                  @click="getDataById(data)"
                >
                  <div class="absolute-bottom text-center text-body2 ellipsis q-pa-none">
                    {{ data.name }}
                    <q-tooltip content-class="bg-indigo">{{ data.name }}</q-tooltip>
                  </div>
                </q-img>
              </div>
            </div>
          </q-scroll-area>
          <div class="row justify-center">
            <q-pagination v-model="pageNo" :max="totalPage" input @input="loadData" />
          </div>
        </div>
      </q-form>
    </q-dialog>
  </div>
</template>

<script>
import { random } from 'boot/math';
import { transitions } from 'boot/datatype';

export default {
  name: 'ChartHouseSetting',
  components: {
  },
  data() {
    return {
      transitions,
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      selectOptions: [],
      loading: false,
      url: 'https://placeimg.com/240/180/nature',
      typeList: [],
      list: [],
      type: '',
      pageNo: 1,
      pageSize: 36,
      totalPage: 10,
      key: '',
    };
  },
  props: {
    config: {
      type: Object,
      required: true,
    },
  },
  methods: {
    popupSelect() {
      this.$refs.dialog.show();
    },
    imagePath(src) {
      let path = '';
      if (src) {
        if (src.startsWith('http')) {
          return src;
        }
        path = `${this.imgUrl}/bi-chart/${src}.png`;
      } else {
        path = this.url;
      }
      return path;
    },
    changeType() {
      this.pageNo = 1;
      this.loadData();
    },
    loadData() {
      this.$axios.get(`/bi/chart/list?name=${this.key}&type=${this.type}&pageNo=${this.pageNo}&pageSize=${this.pageSize}`).then(({ result: { records, total } }) => {
        this.transition = this.getTransition();
        if (records) {
          this.list = records;
        }
        this.totalPage = Math.ceil(total / this.pageSize);
      });
    },
    getDataById(data) {
      this.$axios.get(`/bi/chartDetail/queryById?id=${data.id}`).then(({ result }) => {
        if (result) {
          const content = JSON.parse(result.content);
          const { chartDetail } = content;
          this.config.contentIndex += 1;
          this.config.code = chartDetail.code;
          this.setOptions(data.id);
          this.$refs.dialog.hide();
        }
      });
    },
    getTransition() {
      return this.transitions[random(0, this.transitions.length - 1)];
    },
    setOptions(id) {
      this.$axios.get(`/bi/chart/queryById?id=${id}`).then(({ result }) => {
        this.config.id = id;
        this.selectOptions = [{ label: result.name, value: result.id }];
      });
    },
  },
  watch: {
  },
  mounted() {
    this.$axios.get('/bi/chartType/list?pageSize=100').then(({ result }) => {
      this.typeList = result.records;
    });
    this.loadData();
    if (this.config.id) {
      this.setOptions(this.config.id);
    }
  },
};
</script>

<style lang="stylus" scoped></style>
